<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="auto" 
  >
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="Activity password" prop="password">
      <el-input v-model="ruleForm.password" />
    </el-form-item>
>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { validateUsername, validatePassword } from "../utils/validate";

const ruleFormRef = ref();
const ruleForm = reactive({
  name: 'Hello',
  password: '',
  region: '',
});

const rules = {
  name: [{ validator: validateUsername, trigger: "blur" }],
  password: [{ validator: validatePassword, trigger: "blur" }],
};

</script>